Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
avalanche
/
avalanche-docs
Obserwuj 2
Polub 0
Fork 0

Przeglądaj źródła
Markdown/html page controller

James Peret 10 lat temu
rodzic
1900377cec
commit
5e0b247930
14 zmienionych plików z 1483 dodań i 4 usunięć
Pokaż statystyki zmian
  1. 10 0
      app/data/page-list.json
  2. 53 0
      app/data/theme/code.md
  3. 25 0
      app/data/theme/figures.md
  4. 80 0
      app/data/theme/images.md
  5. 287 0
      app/data/theme/reboot.md
  6. 611 0
      app/data/theme/tables.md
  7. 313 0
      app/data/theme/typography.html
  8. 1 1
      app/index.html
  9. 11 2
      app/scripts/app.js
  10. 35 0
      app/scripts/controllers/page-group-ctrl.js
  11. 6 0
      app/scripts/services/page-service.js
  12. 26 0
      app/styles/avalanche_theme/docs.scss
  13. 2 1
      app/views/helpers/sidebar.html
  14. 23 0
      app/views/page.html

+ 10 - 0
app/data/page-list.json
Wyświetl plik 

@@ -255,5 +255,15 @@
255 255 
         "tagline" : "Personal user notification feed",
256 256 
         "implemented" : false
257 257 
       }
258 
+    ],
259 
+    "theme" :
260 
+    [
261 
+      {
262 
+        "pageUrl" : "/theme/typography",
263 
+        "slug"  : "typography",
264 
+        "title" : "Typography",
265 
+        "tagline" : "headings, body text, lists, and more",
266 
+        "content_html" : "data/theme/typography.html"
267 
+      }
258 268 
     ]
259 269 
 }

+ 53 - 0
app/data/theme/code.md
Wyświetl plik 

@@ -0,0 +1,53 @@
1 
+---
2 
+layout: docs
3 
+title: Code
4 
+group: content
5 
+---
6 
+
7 
+Styles for inline code snippets and longer, multiline blocks of code.
8 
+
9 
+## Contents
10 
+
11 
+* Will be replaced with the ToC, excluding the "Contents" header
12 
+{:toc}
13 
+
14 
+## Inline code
15 
+
16 
+Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets.
17 
+
18 
+{% example html %}
19 
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.
20 
+{% endexample %}
21 
+
22 
+## Preformatted text
23 
+
24 
+Or, code blocks. Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 350px and provide a y-axis scrollbar.
25 
+
26 
+{% example html %}
27 
+<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
28 
+{% endexample %}
29 
+
30 
+## Variables
31 
+
32 
+For indicating variables use the `<var>` tag.
33 
+
34 
+{% example html %}
35 
+<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
36 
+{% endexample %}
37 
+
38 
+## User input
39 
+
40 
+Use the `<kbd>` to indicate input that is typically entered via keyboard.
41 
+
42 
+{% example html %}
43 
+To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
44 
+To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
45 
+{% endexample %}
46 
+
47 
+## Sample output
48 
+
49 
+For indicating blocks sample output from a program use the `<samp>` tag.
50 
+
51 
+{% example html %}
52 
+<samp>This text is meant to be treated as sample output from a computer program.</samp>
53 
+{% endexample %}

+ 25 - 0
app/data/theme/figures.md
Wyświetl plik 

@@ -0,0 +1,25 @@
1 
+---
2 
+layout: docs
3 
+title: Images
4 
+group: content
5 
+---
6 
+
7 
+Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
8 
+
9 
+Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive.
10 
+
11 
+{% example html %}
12 
+<figure class="figure">
13 
+  <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
14 
+  <figcaption class="figure-caption">A caption for the above image.</figcaption>
15 
+</figure>
16 
+{% endexample %}
17 
+
18 
+Aligning the figure's caption is easy with our [text utilities]().
19 
+
20 
+{% example html %}
21 
+<figure class="figure">
22 
+  <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
23 
+  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
24 
+</figure>
25 
+{% endexample %}

+ 80 - 0
app/data/theme/images.md
Wyświetl plik 

@@ -0,0 +1,80 @@
1 
+---
2 
+layout: docs
3 
+title: Images
4 
+group: content
5 
+---
6 
+
7 
+Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
8 
+
9 
+## Contents
10 
+
11 
+* Will be replaced with the ToC, excluding the "Contents" header
12 
+{:toc}
13 
+
14 
+## Responsive images
15 
+
16 
+Images in Bootstrap are made responsive with `.img-responsive`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
17 
+
18 
+<div class="bd-example">
19 
+  <img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image">
20 
+</div>
21 
+
22 
+{% highlight html %}
23 
+<img src="..." class="img-responsive" alt="Responsive image">
24 
+{% endhighlight %}
25 
+
26 
+{% callout warning %}
27 
+#### SVG images and IE 9-10
28 
+
29 
+In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
30 
+{% endcallout %}
31 
+
32 
+## Image shapes
33 
+
34 
+Add classes to an `<img>` element to easily style images in any project.
35 
+
36 
+<div class="bd-example bd-example-images">
37 
+  <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
38 
+  <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
39 
+  <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
40 
+</div>
41 
+
42 
+{% highlight html %}
43 
+<img src="..." alt="..." class="img-rounded">
44 
+<img src="..." alt="..." class="img-circle">
45 
+<img src="..." alt="..." class="img-thumbnail">
46 
+{% endhighlight %}
47 
+
48 
+## Aligning images
49 
+
50 
+Align images with the [helper float classes](/components/helpers) or [text alignment classes](/components/helpers). A simple centering class can also be used for `block` level images.
51 
+
52 
+<div class="bd-example bd-example-images">
53 
+  <img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
54 
+  <img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners">
55 
+</div>
56 
+
57 
+{% highlight html %}
58 
+<img src="..." class="img-rounded pull-left" alt="...">
59 
+<img src="..." class="img-rounded pull-right" alt="...">
60 
+{% endhighlight %}
61 
+
62 
+<div class="bd-example bd-example-images">
63 
+  <img data-src="holder.js/200x200" class="img-rounded center-block" style="display: block;" alt="A generic square placeholder image with rounded corners">
64 
+</div>
65 
+
66 
+{% highlight html %}
67 
+<img src="..." class="img-rounded center-block" style="display: block;" alt="...">
68 
+{% endhighlight %}
69 
+
70 
+<div class="bd-example bd-example-images">
71 
+  <div class="text-center">
72 
+    <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
73 
+  </div>
74 
+</div>
75 
+
76 
+{% highlight html %}
77 
+<div class="text-center">
78 
+  <img src="..." class="img-rounded" alt="...">
79 
+</div>
80 
+{% endhighlight %}

+ 287 - 0
app/data/theme/reboot.md
Wyświetl plik 

@@ -0,0 +1,287 @@
1 
+---
2 
+layout: docs
3 
+title: Reboot
4 
+group: content
5 
+redirect_from: "/content/"
6 
+---
7 
+
8 
+Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.
9 
+
10 
+Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
11 
+
12 
+## Contents
13 
+
14 
+* Will be replaced with the ToC, excluding the "Contents" header
15 
+{:toc}
16 
+
17 
+## Approach
18 
+
19 
+Here are our guidelines and reasons for choosing what to override in Reboot:
20 
+
21 
+- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
22 
+- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
23 
+- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
24 
+- Keep declarations of `font`-related properties to a minimal, using `inherit` whenever possible.
25 
+
26 
+## Page defaults
27 
+
28 
+The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
29 
+
30 
+- The `box-sizing` is globally set on every element—including `*:before` and `*after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
31 
+- A base `font-size: 16px` is declared on the `<html>` and `font-size: 1rem` on the `<body>` for easy responsive type-scaling via media queryies.
32 
+- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies.
33 
+- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
34 
+
35 
+## Headings and paragraphs
36 
+
37 
+All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
38 
+
39 
+<div class="bd-example">
40 
+{% markdown %}
41 
+# h1 heading
42 
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
43 
+
44 
+## h2 heading
45 
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
46 
+
47 
+### h3 heading
48 
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
49 
+
50 
+#### h4 heading
51 
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
52 
+
53 
+##### h5 heading
54 
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
55 
+
56 
+###### h6 heading
57 
+Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
58 
+{% endmarkdown %}
59 
+</div>
60 
+
61 
+## Lists
62 
+
63 
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
64 
+
65 
+<div class="bd-example">
66 
+{% markdown %}
67 
+* Lorem ipsum dolor sit amet
68 
+* Consectetur adipiscing elit
69 
+* Integer molestie lorem at massa
70 
+* Facilisis in pretium nisl aliquet
71 
+* Nulla volutpat aliquam velit
72 
+  * Phasellus iaculis neque
73 
+  * Purus sodales ultricies
74 
+  * Vestibulum laoreet porttitor sem
75 
+  * Ac tristique libero volutpat at
76 
+* Faucibus porta lacus fringilla vel
77 
+* Aenean sit amet erat nunc
78 
+* Eget porttitor lorem
79 
+
80 
+1. Lorem ipsum dolor sit amet
81 
+2. Consectetur adipiscing elit
82 
+3. Integer molestie lorem at massa
83 
+4. Facilisis in pretium nisl aliquet
84 
+5. Nulla volutpat aliquam velit
85 
+6. Faucibus porta lacus fringilla vel
86 
+7. Aenean sit amet erat nunc
87 
+8. Eget porttitor lorem
88 
+{% endmarkdown %}
89 
+</div>
90 
+
91 
+For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
92 
+
93 
+<div class="bd-example">
94 
+{% markdown %}
95 
+<dl>
96 
+  <dt>Description lists</dt>
97 
+  <dd>A description list is perfect for defining terms.</dd>
98 
+  <dt>Euismod</dt>
99 
+  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
100 
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
101 
+  <dt>Malesuada porta</dt>
102 
+  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
103 
+</dl>
104 
+{% endmarkdown %}
105 
+</div>
106 
+
107 
+## Preformatted text
108 
+
109 
+The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
110 
+
111 
+<div class="bd-example">
112 
+{% markdown %}
113 
+<pre>
114 
+.element {
115 
+  margin-bottom: 1rem;
116 
+}
117 
+</pre>
118 
+{% endmarkdown %}
119 
+</div>
120 
+
121 
+## Tables
122 
+
123 
+Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/components/tables/).
124 
+
125 
+<div class="bd-example">
126 
+  <table>
127 
+    <caption>
128 
+      This is an example table, and this is its caption to describe the contents.
129 
+    </caption>
130 
+    <thead>
131 
+      <tr>
132 
+        <th>Table heading</th>
133 
+        <th>Table heading</th>
134 
+        <th>Table heading</th>
135 
+        <th>Table heading</th>
136 
+      </tr>
137 
+    </thead>
138 
+    <tbody>
139 
+      <tr>
140 
+        <td>Table cell</td>
141 
+        <td>Table cell</td>
142 
+        <td>Table cell</td>
143 
+        <td>Table cell</td>
144 
+      </tr>
145 
+      <tr>
146 
+        <td>Table cell</td>
147 
+        <td>Table cell</td>
148 
+        <td>Table cell</td>
149 
+        <td>Table cell</td>
150 
+      </tr>
151 
+      <tr>
152 
+        <td>Table cell</td>
153 
+        <td>Table cell</td>
154 
+        <td>Table cell</td>
155 
+        <td>Table cell</td>
156 
+      </tr>
157 
+    </tbody>
158 
+  </table>
159 
+</div>
160 
+
161 
+## Forms
162 
+
163 
+Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
164 
+
165 
+- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
166 
+- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
167 
+- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
168 
+- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
169 
+- `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout.
170 
+
171 
+These changes, and more, are demonstrated below.
172 
+
173 
+<form class="bd-example">
174 
+  <fieldset>
175 
+    <legend>Example legend</legend>
176 
+
177 
+    <p>
178 
+      <label for="input">Example input</label>
179 
+      <input type="text" id="input" placeholder="Example input">
180 
+    </p>
181 
+
182 
+    <p>
183 
+      <label for="select">Example select</label>
184 
+      <select id="select">
185 
+        <option value="">Choose...</option>
186 
+        <optgroup label="Option group 1">
187 
+          <option value="">Option 1</option>
188 
+          <option value="">Option 2</option>
189 
+          <option value="">Option 3</option>
190 
+        </optgroup>
191 
+        <optgroup label="Option group 2">
192 
+          <option value="">Option 4</option>
193 
+          <option value="">Option 5</option>
194 
+          <option value="">Option 6</option>
195 
+        </optgroup>
196 
+      </select>
197 
+    </p>
198 
+
199 
+    <p>
200 
+      <label>
201 
+        <input type="checkbox" value="">
202 
+        Check this checkbox
203 
+      </label>
204 
+    </p>
205 
+
206 
+    <p>
207 
+      <label>
208 
+        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
209 
+        Option one is this and that
210 
+      </label>
211 
+      <label>
212 
+        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
213 
+        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
214 
+      </label>
215 
+      <label>
216 
+        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
217 
+        Option three is disabled
218 
+      </label>
219 
+    </p>
220 
+
221 
+    <p>
222 
+      <label for="textarea">Example textarea</label>
223 
+      <textarea id="textarea" rows="3"></textarea>
224 
+    </p>
225 
+
226 
+    <p>
227 
+      <label for="time">Example temporal</label>
228 
+      <input type="datetime" id="time">
229 
+    </p>
230 
+
231 
+    <p>
232 
+      <label for="output">Example output</label>
233 
+      <output name="result" id="output">100</output>
234 
+    </p>
235 
+
236 
+    <p>
237 
+      <button type="submit">Button submit</button>
238 
+      <input type="submit" value="Input submit button">
239 
+      <input type="button" value="Input button">
240 
+    </p>
241 
+
242 
+    <p>
243 
+      <button type="submit" disabled>Button submit</button>
244 
+      <input type="submit" value="Input submit button" disabled>
245 
+      <input type="button" value="Input button" disabled>
246 
+    </p>
247 
+  </fieldset>
248 
+</form>
249 
+
250 
+## Misc elements
251 
+
252 
+### Address
253 
+
254 
+The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`.
255 
+
256 
+<div class="bd-example">
257 
+  <address>
258 
+    <strong>Twitter, Inc.</strong><br>
259 
+    1355 Market St, Suite 900<br>
260 
+    San Francisco, CA 94103<br>
261 
+    <abbr title="Phone">P:</abbr> (123) 456-7890
262 
+  </address>
263 
+
264 
+  <address>
265 
+    <strong>Full Name</strong><br>
266 
+    <a href="mailto:#">first.last@example.com</a>
267 
+  </address>
268 
+</div>
269 
+
270 
+### Blockquote
271 
+
272 
+The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
273 
+
274 
+<div class="bd-example">
275 
+  <blockquote>
276 
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
277 
+    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
278 
+  </blockquote>
279 
+</div>
280 
+
281 
+### Inline elements
282 
+
283 
+The `<abbr>` element receives basic styling to make it stand the amongst paragraph text.
284 
+
285 
+<div class="bd-example">
286 
+  Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
287 
+</div>

+ 611 - 0
app/data/theme/tables.md
Wyświetl plik 

@@ -0,0 +1,611 @@
1 
+---
2 
+layout: docs
3 
+title: Tables
4 
+group: content
5 
+---
6 
+
7 
+Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
8 
+
9 
+## Contents
10 
+
11 
+* Will be replaced with the ToC, excluding the "Contents" header
12 
+{:toc}
13 
+
14 
+## Basic example
15 
+
16 
+{% example html %}
17 
+<table class="table">
18 
+  <thead>
19 
+    <tr>
20 
+      <th>#</th>
21 
+      <th>First Name</th>
22 
+      <th>Last Name</th>
23 
+      <th>Username</th>
24 
+    </tr>
25 
+  </thead>
26 
+  <tbody>
27 
+    <tr>
28 
+      <th scope="row">1</th>
29 
+      <td>Mark</td>
30 
+      <td>Otto</td>
31 
+      <td>@mdo</td>
32 
+    </tr>
33 
+    <tr>
34 
+      <th scope="row">2</th>
35 
+      <td>Jacob</td>
36 
+      <td>Thornton</td>
37 
+      <td>@fat</td>
38 
+    </tr>
39 
+    <tr>
40 
+      <th scope="row">3</th>
41 
+      <td>Larry</td>
42 
+      <td>the Bird</td>
43 
+      <td>@twitter</td>
44 
+    </tr>
45 
+  </tbody>
46 
+</table>
47 
+{% endexample %}
48 
+
49 
+## Inverse table
50 
+
51 
+{% example html %}
52 
+<table class="table table-inverse">
53 
+  <thead>
54 
+    <tr>
55 
+      <th>#</th>
56 
+      <th>First Name</th>
57 
+      <th>Last Name</th>
58 
+      <th>Username</th>
59 
+    </tr>
60 
+  </thead>
61 
+  <tbody>
62 
+    <tr>
63 
+      <th scope="row">1</th>
64 
+      <td>Mark</td>
65 
+      <td>Otto</td>
66 
+      <td>@mdo</td>
67 
+    </tr>
68 
+    <tr>
69 
+      <th scope="row">2</th>
70 
+      <td>Jacob</td>
71 
+      <td>Thornton</td>
72 
+      <td>@fat</td>
73 
+    </tr>
74 
+    <tr>
75 
+      <th scope="row">3</th>
76 
+      <td>Larry</td>
77 
+      <td>the Bird</td>
78 
+      <td>@twitter</td>
79 
+    </tr>
80 
+  </tbody>
81 
+</table>
82 
+{% endexample %}
83 
+
84 
+## Table head options
85 
+
86 
+Use one of two modifier classes to make `<thead>`s appear light or dark gray.
87 
+
88 
+{% example html %}
89 
+<table class="table">
90 
+  <thead class="thead-inverse">
91 
+    <tr>
92 
+      <th>#</th>
93 
+      <th>First Name</th>
94 
+      <th>Last Name</th>
95 
+      <th>Username</th>
96 
+    </tr>
97 
+  </thead>
98 
+  <tbody>
99 
+    <tr>
100 
+      <th scope="row">1</th>
101 
+      <td>Mark</td>
102 
+      <td>Otto</td>
103 
+      <td>@mdo</td>
104 
+    </tr>
105 
+    <tr>
106 
+      <th scope="row">2</th>
107 
+      <td>Jacob</td>
108 
+      <td>Thornton</td>
109 
+      <td>@fat</td>
110 
+    </tr>
111 
+    <tr>
112 
+      <th scope="row">3</th>
113 
+      <td>Larry</td>
114 
+      <td>the Bird</td>
115 
+      <td>@twitter</td>
116 
+    </tr>
117 
+  </tbody>
118 
+</table>
119 
+
120 
+<table class="table">
121 
+  <thead class="thead-default">
122 
+    <tr>
123 
+      <th>#</th>
124 
+      <th>First Name</th>
125 
+      <th>Last Name</th>
126 
+      <th>Username</th>
127 
+    </tr>
128 
+  </thead>
129 
+  <tbody>
130 
+    <tr>
131 
+      <th scope="row">1</th>
132 
+      <td>Mark</td>
133 
+      <td>Otto</td>
134 
+      <td>@mdo</td>
135 
+    </tr>
136 
+    <tr>
137 
+      <th scope="row">2</th>
138 
+      <td>Jacob</td>
139 
+      <td>Thornton</td>
140 
+      <td>@fat</td>
141 
+    </tr>
142 
+    <tr>
143 
+      <th scope="row">3</th>
144 
+      <td>Larry</td>
145 
+      <td>the Bird</td>
146 
+      <td>@twitter</td>
147 
+    </tr>
148 
+  </tbody>
149 
+</table>
150 
+{% endexample %}
151 
+
152 
+## Striped rows
153 
+
154 
+Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
155 
+
156 
+{% example html %}
157 
+<table class="table table-striped">
158 
+  <thead>
159 
+    <tr>
160 
+      <th>#</th>
161 
+      <th>First Name</th>
162 
+      <th>Last Name</th>
163 
+      <th>Username</th>
164 
+    </tr>
165 
+  </thead>
166 
+  <tbody>
167 
+    <tr>
168 
+      <th scope="row">1</th>
169 
+      <td>Mark</td>
170 
+      <td>Otto</td>
171 
+      <td>@mdo</td>
172 
+    </tr>
173 
+    <tr>
174 
+      <th scope="row">2</th>
175 
+      <td>Jacob</td>
176 
+      <td>Thornton</td>
177 
+      <td>@fat</td>
178 
+    </tr>
179 
+    <tr>
180 
+      <th scope="row">3</th>
181 
+      <td>Larry</td>
182 
+      <td>the Bird</td>
183 
+      <td>@twitter</td>
184 
+    </tr>
185 
+  </tbody>
186 
+</table>
187 
+{% endexample %}
188 
+
189 
+## Bordered table
190 
+
191 
+Add `.table-bordered` for borders on all sides of the table and cells.
192 
+
193 
+{% example html %}
194 
+<table class="table table-bordered">
195 
+  <thead>
196 
+    <tr>
197 
+      <th>#</th>
198 
+      <th>First Name</th>
199 
+      <th>Last Name</th>
200 
+      <th>Username</th>
201 
+    </tr>
202 
+  </thead>
203 
+  <tbody>
204 
+    <tr>
205 
+      <th scope="row">1</th>
206 
+      <td>Mark</td>
207 
+      <td>Otto</td>
208 
+      <td>@mdo</td>
209 
+    </tr>
210 
+    <tr>
211 
+      <th scope="row">2</th>
212 
+      <td>Mark</td>
213 
+      <td>Otto</td>
214 
+      <td>@TwBootstrap</td>
215 
+    </tr>
216 
+    <tr>
217 
+      <th scope="row">3</th>
218 
+      <td>Jacob</td>
219 
+      <td>Thornton</td>
220 
+      <td>@fat</td>
221 
+    </tr>
222 
+    <tr>
223 
+      <th scope="row">4</th>
224 
+      <td colspan="2">Larry the Bird</td>
225 
+      <td>@twitter</td>
226 
+    </tr>
227 
+  </tbody>
228 
+</table>
229 
+{% endexample %}
230 
+
231 
+## Hoverable rows
232 
+
233 
+Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
234 
+
235 
+{% example html %}
236 
+<table class="table table-hover">
237 
+  <thead>
238 
+    <tr>
239 
+      <th>#</th>
240 
+      <th>First Name</th>
241 
+      <th>Last Name</th>
242 
+      <th>Username</th>
243 
+    </tr>
244 
+  </thead>
245 
+  <tbody>
246 
+    <tr>
247 
+      <th scope="row">1</th>
248 
+      <td>Mark</td>
249 
+      <td>Otto</td>
250 
+      <td>@mdo</td>
251 
+    </tr>
252 
+    <tr>
253 
+      <th scope="row">2</th>
254 
+      <td>Jacob</td>
255 
+      <td>Thornton</td>
256 
+      <td>@fat</td>
257 
+    </tr>
258 
+    <tr>
259 
+      <th scope="row">3</th>
260 
+      <td colspan="2">Larry the Bird</td>
261 
+      <td>@twitter</td>
262 
+    </tr>
263 
+  </tbody>
264 
+</table>
265 
+{% endexample %}
266 
+
267 
+## Small table
268 
+
269 
+Add `.table-sm` to make tables more compact by cutting cell padding in half.
270 
+
271 
+{% example html %}
272 
+<table class="table table-sm">
273 
+  <thead>
274 
+    <tr>
275 
+      <th>#</th>
276 
+      <th>First Name</th>
277 
+      <th>Last Name</th>
278 
+      <th>Username</th>
279 
+    </tr>
280 
+  </thead>
281 
+  <tbody>
282 
+    <tr>
283 
+      <th scope="row">1</th>
284 
+      <td>Mark</td>
285 
+      <td>Otto</td>
286 
+      <td>@mdo</td>
287 
+    </tr>
288 
+    <tr>
289 
+      <th scope="row">2</th>
290 
+      <td>Jacob</td>
291 
+      <td>Thornton</td>
292 
+      <td>@fat</td>
293 
+    </tr>
294 
+    <tr>
295 
+      <th scope="row">3</th>
296 
+      <td colspan="2">Larry the Bird</td>
297 
+      <td>@twitter</td>
298 
+    </tr>
299 
+  </tbody>
300 
+</table>
301 
+{% endexample %}
302 
+
303 
+## Contextual classes
304 
+
305 
+Use contextual classes to color table rows or individual cells.
306 
+
307 
+<div class="table-responsive">
308 
+  <table class="table table-bordered table-striped">
309 
+    <colgroup>
310 
+      <col class="col-xs-1">
311 
+      <col class="col-xs-7">
312 
+    </colgroup>
313 
+    <thead>
314 
+      <tr>
315 
+        <th>Class</th>
316 
+        <th>Description</th>
317 
+      </tr>
318 
+    </thead>
319 
+    <tbody>
320 
+      <tr>
321 
+        <th scope="row">
322 
+          <code>.table-active</code>
323 
+        </th>
324 
+        <td>Applies the hover color to a particular row or cell</td>
325 
+      </tr>
326 
+      <tr>
327 
+        <th scope="row">
328 
+          <code>.table-success</code>
329 
+        </th>
330 
+        <td>Indicates a successful or positive action</td>
331 
+      </tr>
332 
+      <tr>
333 
+        <th scope="row">
334 
+          <code>.table-info</code>
335 
+        </th>
336 
+        <td>Indicates a neutral informative change or action</td>
337 
+      </tr>
338 
+      <tr>
339 
+        <th scope="row">
340 
+          <code>.table-warning</code>
341 
+        </th>
342 
+        <td>Indicates a warning that might need attention</td>
343 
+      </tr>
344 
+      <tr>
345 
+        <th scope="row">
346 
+          <code>.table-danger</code>
347 
+        </th>
348 
+        <td>Indicates a dangerous or potentially negative action</td>
349 
+      </tr>
350 
+    </tbody>
351 
+  </table>
352 
+</div>
353 
+
354 
+<div class="bd-example">
355 
+  <table class="table">
356 
+    <thead>
357 
+      <tr>
358 
+        <th>#</th>
359 
+        <th>Column heading</th>
360 
+        <th>Column heading</th>
361 
+        <th>Column heading</th>
362 
+      </tr>
363 
+    </thead>
364 
+    <tbody>
365 
+      <tr class="table-active">
366 
+        <th scope="row">1</th>
367 
+        <td>Column content</td>
368 
+        <td>Column content</td>
369 
+        <td>Column content</td>
370 
+      </tr>
371 
+      <tr>
372 
+        <th scope="row">2</th>
373 
+        <td>Column content</td>
374 
+        <td>Column content</td>
375 
+        <td>Column content</td>
376 
+      </tr>
377 
+      <tr class="table-success">
378 
+        <th scope="row">3</th>
379 
+        <td>Column content</td>
380 
+        <td>Column content</td>
381 
+        <td>Column content</td>
382 
+      </tr>
383 
+      <tr>
384 
+        <th scope="row">4</th>
385 
+        <td>Column content</td>
386 
+        <td>Column content</td>
387 
+        <td>Column content</td>
388 
+      </tr>
389 
+      <tr class="table-info">
390 
+        <th scope="row">5</th>
391 
+        <td>Column content</td>
392 
+        <td>Column content</td>
393 
+        <td>Column content</td>
394 
+      </tr>
395 
+      <tr>
396 
+        <th scope="row">6</th>
397 
+        <td>Column content</td>
398 
+        <td>Column content</td>
399 
+        <td>Column content</td>
400 
+      </tr>
401 
+      <tr class="table-warning">
402 
+        <th scope="row">7</th>
403 
+        <td>Column content</td>
404 
+        <td>Column content</td>
405 
+        <td>Column content</td>
406 
+      </tr>
407 
+      <tr>
408 
+        <th scope="row">8</th>
409 
+        <td>Column content</td>
410 
+        <td>Column content</td>
411 
+        <td>Column content</td>
412 
+      </tr>
413 
+      <tr class="table-danger">
414 
+        <th scope="row">9</th>
415 
+        <td>Column content</td>
416 
+        <td>Column content</td>
417 
+        <td>Column content</td>
418 
+      </tr>
419 
+    </tbody>
420 
+  </table>
421 
+</div>
422 
+
423 
+{% highlight html %}
424 
+<!-- On rows -->
425 
+<tr class="table-active">...</tr>
426 
+<tr class="table-success">...</tr>
427 
+<tr class="table-warning">...</tr>
428 
+<tr class="table-danger">...</tr>
429 
+<tr class="table-info">...</tr>
430 
+
431 
+<!-- On cells (`td` or `th`) -->
432 
+<tr>
433 
+  <td class="table-active">...</td>
434 
+  <td class="table-success">...</td>
435 
+  <td class="table-warning">...</td>
436 
+  <td class="table-danger">...</td>
437 
+  <td class="table-info">...</td>
438 
+</tr>
439 
+{% endhighlight %}
440 
+
441 
+## Responsive tables
442 
+
443 
+Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
444 
+
445 
+{% callout warning %}
446 
+#### Vertical clipping/truncation
447 
+
448 
+Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
449 
+{% endcallout %}
450 
+
451 
+{% callout warning %}
452 
+#### Firefox and fieldsets
453 
+
454 
+Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap:
455 
+
456 
+{% highlight css %}
457 
+@-moz-document url-prefix() {
458 
+  fieldset { display: table-cell; }
459 
+}
460 
+{% endhighlight %}
461 
+
462 
+For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
463 
+{% endcallout %}
464 
+
465 
+<div class="bd-example">
466 
+  <div class="table-responsive">
467 
+    <table class="table">
468 
+      <thead>
469 
+        <tr>
470 
+          <th>#</th>
471 
+          <th>Table heading</th>
472 
+          <th>Table heading</th>
473 
+          <th>Table heading</th>
474 
+          <th>Table heading</th>
475 
+          <th>Table heading</th>
476 
+          <th>Table heading</th>
477 
+        </tr>
478 
+      </thead>
479 
+      <tbody>
480 
+        <tr>
481 
+          <th scope="row">1</th>
482 
+          <td>Table cell</td>
483 
+          <td>Table cell</td>
484 
+          <td>Table cell</td>
485 
+          <td>Table cell</td>
486 
+          <td>Table cell</td>
487 
+          <td>Table cell</td>
488 
+        </tr>
489 
+        <tr>
490 
+          <th scope="row">2</th>
491 
+          <td>Table cell</td>
492 
+          <td>Table cell</td>
493 
+          <td>Table cell</td>
494 
+          <td>Table cell</td>
495 
+          <td>Table cell</td>
496 
+          <td>Table cell</td>
497 
+        </tr>
498 
+        <tr>
499 
+          <th scope="row">3</th>
500 
+          <td>Table cell</td>
501 
+          <td>Table cell</td>
502 
+          <td>Table cell</td>
503 
+          <td>Table cell</td>
504 
+          <td>Table cell</td>
505 
+          <td>Table cell</td>
506 
+        </tr>
507 
+      </tbody>
508 
+    </table>
509 
+  </div>
510 
+
511 
+  <div class="table-responsive">
512 
+    <table class="table table-bordered">
513 
+      <thead>
514 
+        <tr>
515 
+          <th>#</th>
516 
+          <th>Table heading</th>
517 
+          <th>Table heading</th>
518 
+          <th>Table heading</th>
519 
+          <th>Table heading</th>
520 
+          <th>Table heading</th>
521 
+          <th>Table heading</th>
522 
+        </tr>
523 
+      </thead>
524 
+      <tbody>
525 
+        <tr>
526 
+          <th scope="row">1</th>
527 
+          <td>Table cell</td>
528 
+          <td>Table cell</td>
529 
+          <td>Table cell</td>
530 
+          <td>Table cell</td>
531 
+          <td>Table cell</td>
532 
+          <td>Table cell</td>
533 
+        </tr>
534 
+        <tr>
535 
+          <th scope="row">2</th>
536 
+          <td>Table cell</td>
537 
+          <td>Table cell</td>
538 
+          <td>Table cell</td>
539 
+          <td>Table cell</td>
540 
+          <td>Table cell</td>
541 
+          <td>Table cell</td>
542 
+        </tr>
543 
+        <tr>
544 
+          <th scope="row">3</th>
545 
+          <td>Table cell</td>
546 
+          <td>Table cell</td>
547 
+          <td>Table cell</td>
548 
+          <td>Table cell</td>
549 
+          <td>Table cell</td>
550 
+          <td>Table cell</td>
551 
+        </tr>
552 
+      </tbody>
553 
+    </table>
554 
+  </div>
555 
+</div>
556 
+
557 
+{% highlight html %}
558 
+<div class="table-responsive">
559 
+  <table class="table">
560 
+    ...
561 
+  </table>
562 
+</div>
563 
+{% endhighlight %}
564 
+
565 
+
566 
+### Reflow
567 
+
568 
+{% example html %}
569 
+<table class="table table-reflow">
570 
+  <thead>
571 
+    <tr>
572 
+      <th>#</th>
573 
+      <th>Table heading</th>
574 
+      <th>Table heading</th>
575 
+      <th>Table heading</th>
576 
+      <th>Table heading</th>
577 
+      <th>Table heading</th>
578 
+      <th>Table heading</th>
579 
+    </tr>
580 
+  </thead>
581 
+  <tbody>
582 
+    <tr>
583 
+      <th scope="row">1</th>
584 
+      <td>Table cell</td>
585 
+      <td>Table cell</td>
586 
+      <td>Table cell</td>
587 
+      <td>Table cell</td>
588 
+      <td>Table cell</td>
589 
+      <td>Table cell</td>
590 
+    </tr>
591 
+    <tr>
592 
+      <th scope="row">2</th>
593 
+      <td>Table cell</td>
594 
+      <td>Table cell</td>
595 
+      <td>Table cell</td>
596 
+      <td>Table cell</td>
597 
+      <td>Table cell</td>
598 
+      <td>Table cell</td>
599 
+    </tr>
600 
+    <tr>
601 
+      <th scope="row">3</th>
602 
+      <td>Table cell</td>
603 
+      <td>Table cell</td>
604 
+      <td>Table cell</td>
605 
+      <td>Table cell</td>
606 
+      <td>Table cell</td>
607 
+      <td>Table cell</td>
608 
+    </tr>
609 
+  </tbody>
610 
+</table>
611 
+{% endexample %}

+ 313 - 0
app/data/theme/typography.html
Wyświetl plik 

@@ -0,0 +1,313 @@
1 
+<p>Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the <a href="/components/utilities/">textual utility classes</a>.</p>
2 
+
3 
+<h2 id="contents"><a class="anchorjs-link " href="#contents" aria-label="Anchor link for: contents" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Contents</h2>
4 
+
5 
+<ul id="markdown-toc">
6 
+  <li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
7 
+  <li><a href="#global-settings" id="markdown-toc-global-settings">Global settings</a></li>
8 
+  <li><a href="#headings" id="markdown-toc-headings">Headings</a>    <ul>
9 
+      <li><a href="#customizing-headings" id="markdown-toc-customizing-headings">Customizing headings</a></li>
10 
+    </ul>
11 
+  </li>
12 
+  <li><a href="#display-headings" id="markdown-toc-display-headings">Display headings</a></li>
13 
+  <li><a href="#lead" id="markdown-toc-lead">Lead</a></li>
14 
+  <li><a href="#inline-text-elements" id="markdown-toc-inline-text-elements">Inline text elements</a></li>
15 
+  <li><a href="#abbreviations" id="markdown-toc-abbreviations">Abbreviations</a></li>
16 
+  <li><a href="#blockquotes" id="markdown-toc-blockquotes">Blockquotes</a>    <ul>
17 
+      <li><a href="#naming-a-source" id="markdown-toc-naming-a-source">Naming a source</a></li>
18 
+      <li><a href="#reverse-layout" id="markdown-toc-reverse-layout">Reverse layout</a></li>
19 
+    </ul>
20 
+  </li>
21 
+  <li><a href="#lists" id="markdown-toc-lists">Lists</a>    <ul>
22 
+      <li><a href="#unstyled" id="markdown-toc-unstyled">Unstyled</a></li>
23 
+      <li><a href="#inline" id="markdown-toc-inline">Inline</a></li>
24 
+      <li><a href="#horizontal-description" id="markdown-toc-horizontal-description">Horizontal description</a></li>
25 
+    </ul>
26 
+  </li>
27 
+</ul>
28 
+
29 
+<h2 id="global-settings"><a class="anchorjs-link " href="#global-settings" aria-label="Anchor link for: global settings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Global settings</h2>
30 
+
31 
+<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
32 
+
33 
+<ul>
34 
+  <li>Set <code>background-color: #fff;</code> on the <code>&lt;body&gt;</code></li>
35 
+  <li>Use the <code>$font-family-base</code>, <code>$font-size-base</code>, and <code>$line-height-base</code> attributes as our typographic base</li>
36 
+  <li>Set the global link color via <code>$link-color</code> and apply link underlines only on <code>:hover</code></li>
37 
+</ul>
38 
+
39 
+<p>These styles can be found within <code>_reboot.scss</code>.</p>
40 
+
41 
+<h2 id="headings"><a class="anchorjs-link " href="#headings" aria-label="Anchor link for: headings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Headings</h2>
42 
+
43 
+<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
44 
+
45 
+<div class="bd-example bd-example-type">
46 
+  <table class="table">
47 
+    <tbody>
48 
+      <tr>
49 
+        <td><h1>h1. Bootstrap heading</h1></td>
50 
+        <td class="type-info">Semibold 36px</td>
51 
+      </tr>
52 
+      <tr>
53 
+        <td><h2>h2. Bootstrap heading</h2></td>
54 
+        <td class="type-info">Semibold 30px</td>
55 
+      </tr>
56 
+      <tr>
57 
+        <td><h3>h3. Bootstrap heading</h3></td>
58 
+        <td class="type-info">Semibold 24px</td>
59 
+      </tr>
60 
+      <tr>
61 
+        <td><h4>h4. Bootstrap heading</h4></td>
62 
+        <td class="type-info">Semibold 18px</td>
63 
+      </tr>
64 
+      <tr>
65 
+        <td><h5>h5. Bootstrap heading</h5></td>
66 
+        <td class="type-info">Semibold 14px</td>
67 
+      </tr>
68 
+      <tr>
69 
+        <td><h6>h6. Bootstrap heading</h6></td>
70 
+        <td class="type-info">Semibold 12px</td>
71 
+      </tr>
72 
+    </tbody>
73 
+  </table>
74 
+</div>
75 
+
76 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1&gt;</span>h1. Bootstrap heading<span class="nt">&lt;/h1&gt;</span>
77 
+<span class="nt">&lt;h2&gt;</span>h2. Bootstrap heading<span class="nt">&lt;/h2&gt;</span>
78 
+<span class="nt">&lt;h3&gt;</span>h3. Bootstrap heading<span class="nt">&lt;/h3&gt;</span>
79 
+<span class="nt">&lt;h4&gt;</span>h4. Bootstrap heading<span class="nt">&lt;/h4&gt;</span>
80 
+<span class="nt">&lt;h5&gt;</span>h5. Bootstrap heading<span class="nt">&lt;/h5&gt;</span>
81 
+<span class="nt">&lt;h6&gt;</span>h6. Bootstrap heading<span class="nt">&lt;/h6&gt;</span></code></pre></div>
82 
+
83 
+<h3 id="customizing-headings"><a class="anchorjs-link " href="#customizing-headings" aria-label="Anchor link for: customizing headings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Customizing headings</h3>
84 
+
85 
+<p>Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.</p>
86 
+
87 
+<div class="bd-example" data-example-id="">
88 
+<h3>
89 
+  Fancy display heading
90 
+  <small class="text-muted">With faded secondary text</small>
91 
+</h3>
92 
+</div>
93 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h3&gt;</span>
94 
+  Fancy display heading
95 
+  <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>With faded secondary text<span class="nt">&lt;/small&gt;</span>
96 
+<span class="nt">&lt;/h3&gt;</span></code></pre></div>
97 
+
98 
+<h2 id="display-headings"><a class="anchorjs-link " href="#display-headings" aria-label="Anchor link for: display headings" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Display headings</h2>
99 
+
100 
+<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
101 
+
102 
+<div class="bd-example bd-example-type">
103 
+  <table class="table">
104 
+    <tbody>
105 
+      <tr>
106 
+        <td><h1 class="display-4">Display 4</h1></td>
107 
+      </tr>
108 
+      <tr>
109 
+      <td><h1 class="display-3">Display 3</h1></td>
110 
+      </tr>
111 
+      <tr>
112 
+      <td><h1 class="display-2">Display 2</h1></td>
113 
+      </tr>
114 
+      <tr>
115 
+      <td><h1 class="display-1">Display 1</h1></td>
116 
+      </tr>
117 
+    </tbody>
118 
+  </table>
119 
+</div>
120 
+
121 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">&gt;</span>Display 4<span class="nt">&lt;/h1&gt;</span>
122 
+<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">&gt;</span>Display 3<span class="nt">&lt;/h1&gt;</span>
123 
+<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-2"</span><span class="nt">&gt;</span>Display 2<span class="nt">&lt;/h1&gt;</span>
124 
+<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-1"</span><span class="nt">&gt;</span>Display 1<span class="nt">&lt;/h1&gt;</span></code></pre></div>
125 
+
126 
+<h2 id="lead"><a class="anchorjs-link " href="#lead" aria-label="Anchor link for: lead" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Lead</h2>
127 
+
128 
+<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
129 
+
130 
+<div class="bd-example" data-example-id="">
131 
+<p class="lead">
132 
+  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
133 
+</p>
134 
+</div>
135 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>
136 
+  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
137 
+<span class="nt">&lt;/p&gt;</span></code></pre></div>
138 
+
139 
+<h2 id="inline-text-elements"><a class="anchorjs-link " href="#inline-text-elements" aria-label="Anchor link for: inline text elements" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Inline text elements</h2>
140 
+
141 
+<p>Styling for common inline HTML5 elements.</p>
142 
+
143 
+<div class="bd-example" data-example-id="">
144 
+<p>You can use the mark tag to <mark>highlight</mark> text.</p>
145 
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
146 
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
147 
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
148 
+<p><u>This line of text will render as underlined</u></p>
149 
+<p><small>This line of text is meant to be treated as fine print.</small></p>
150 
+<p><strong>This line rendered as bold text.</strong></p>
151 
+<p><em>This line rendered as italicized text.</em></p>
152 
+</div>
153 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>You can use the mark tag to <span class="nt">&lt;mark&gt;</span>highlight<span class="nt">&lt;/mark&gt;</span> text.<span class="nt">&lt;/p&gt;</span>
154 
+<span class="nt">&lt;p&gt;&lt;del&gt;</span>This line of text is meant to be treated as deleted text.<span class="nt">&lt;/del&gt;&lt;/p&gt;</span>
155 
+<span class="nt">&lt;p&gt;&lt;s&gt;</span>This line of text is meant to be treated as no longer accurate.<span class="nt">&lt;/s&gt;&lt;/p&gt;</span>
156 
+<span class="nt">&lt;p&gt;&lt;ins&gt;</span>This line of text is meant to be treated as an addition to the document.<span class="nt">&lt;/ins&gt;&lt;/p&gt;</span>
157 
+<span class="nt">&lt;p&gt;&lt;u&gt;</span>This line of text will render as underlined<span class="nt">&lt;/u&gt;&lt;/p&gt;</span>
158 
+<span class="nt">&lt;p&gt;&lt;small&gt;</span>This line of text is meant to be treated as fine print.<span class="nt">&lt;/small&gt;&lt;/p&gt;</span>
159 
+<span class="nt">&lt;p&gt;&lt;strong&gt;</span>This line rendered as bold text.<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
160 
+<span class="nt">&lt;p&gt;&lt;em&gt;</span>This line rendered as italicized text.<span class="nt">&lt;/em&gt;&lt;/p&gt;</span></code></pre></div>
161 
+
162 
+<p>While not shown above, feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
163 
+
164 
+<h2 id="abbreviations"><a class="anchorjs-link " href="#abbreviations" aria-label="Anchor link for: abbreviations" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Abbreviations</h2>
165 
+
166 
+<p>Stylized implementation of HTML’s <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.</p>
167 
+
168 
+<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
169 
+
170 
+<div class="bd-example" data-example-id="">
171 
+<p><abbr title="attribute">attr</abbr></p>
172 
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
173 
+</div>
174 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"attribute"</span><span class="nt">&gt;</span>attr<span class="nt">&lt;/abbr&gt;&lt;/p&gt;</span>
175 
+<span class="nt">&lt;p&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class=</span><span class="s">"initialism"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/abbr&gt;&lt;/p&gt;</span></code></pre></div>
176 
+
177 
+<h2 id="blockquotes"><a class="anchorjs-link " href="#blockquotes" aria-label="Anchor link for: blockquotes" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Blockquotes</h2>
178 
+
179 
+<p>For quoting blocks of content from another source within your document. Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code>&lt;p&gt;</code>.</p>
180 
+
181 
+<div class="bd-example" data-example-id="">
182 
+<blockquote>
183 
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
184 
+</blockquote>
185 
+</div>
186 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote&gt;</span>
187 
+  <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt">&lt;/p&gt;</span>
188 
+<span class="nt">&lt;/blockquote&gt;</span></code></pre></div>
189 
+
190 
+<h3 id="naming-a-source"><a class="anchorjs-link " href="#naming-a-source" aria-label="Anchor link for: naming a source" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Naming a source</h3>
191 
+
192 
+<p>Add a <code>&lt;footer&gt;</code> for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
193 
+
194 
+<div class="bd-example" data-example-id="">
195 
+<blockquote class="blockquote">
196 
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
197 
+  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
198 
+</blockquote>
199 
+</div>
200 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">&gt;</span>
201 
+  <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt">&lt;/p&gt;</span>
202 
+  <span class="nt">&lt;footer&gt;</span>Someone famous in <span class="nt">&lt;cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">&gt;</span>Source Title<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
203 
+<span class="nt">&lt;/blockquote&gt;</span></code></pre></div>
204 
+
205 
+<h3 id="reverse-layout"><a class="anchorjs-link " href="#reverse-layout" aria-label="Anchor link for: reverse layout" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Reverse layout</h3>
206 
+
207 
+<p>Add <code>.blockquote-reverse</code> for a blockquote with right-aligned content.</p>
208 
+
209 
+<div class="bd-example" data-example-id="">
210 
+<blockquote class="blockquote blockquote-reverse">
211 
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
212 
+  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
213 
+</blockquote>
214 
+</div>
215 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote blockquote-reverse"</span><span class="nt">&gt;</span>
216 
+  <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt">&lt;/p&gt;</span>
217 
+  <span class="nt">&lt;footer&gt;</span>Someone famous in <span class="nt">&lt;cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">&gt;</span>Source Title<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
218 
+<span class="nt">&lt;/blockquote&gt;</span></code></pre></div>
219 
+
220 
+<h2 id="lists"><a class="anchorjs-link " href="#lists" aria-label="Anchor link for: lists" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Lists</h2>
221 
+
222 
+<h3 id="unstyled"><a class="anchorjs-link " href="#unstyled" aria-label="Anchor link for: unstyled" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Unstyled</h3>
223 
+
224 
+<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
225 
+
226 
+<div class="bd-example" data-example-id="">
227 
+<ul class="list-unstyled">
228 
+  <li>Lorem ipsum dolor sit amet</li>
229 
+  <li>Consectetur adipiscing elit</li>
230 
+  <li>Integer molestie lorem at massa</li>
231 
+  <li>Facilisis in pretium nisl aliquet</li>
232 
+  <li>Nulla volutpat aliquam velit
233 
+    <ul>
234 
+      <li>Phasellus iaculis neque</li>
235 
+      <li>Purus sodales ultricies</li>
236 
+      <li>Vestibulum laoreet porttitor sem</li>
237 
+      <li>Ac tristique libero volutpat at</li>
238 
+    </ul>
239 
+  </li>
240 
+  <li>Faucibus porta lacus fringilla vel</li>
241 
+  <li>Aenean sit amet erat nunc</li>
242 
+  <li>Eget porttitor lorem</li>
243 
+</ul>
244 
+</div>
245 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">&gt;</span>
246 
+  <span class="nt">&lt;li&gt;</span>Lorem ipsum dolor sit amet<span class="nt">&lt;/li&gt;</span>
247 
+  <span class="nt">&lt;li&gt;</span>Consectetur adipiscing elit<span class="nt">&lt;/li&gt;</span>
248 
+  <span class="nt">&lt;li&gt;</span>Integer molestie lorem at massa<span class="nt">&lt;/li&gt;</span>
249 
+  <span class="nt">&lt;li&gt;</span>Facilisis in pretium nisl aliquet<span class="nt">&lt;/li&gt;</span>
250 
+  <span class="nt">&lt;li&gt;</span>Nulla volutpat aliquam velit
251 
+    <span class="nt">&lt;ul&gt;</span>
252 
+      <span class="nt">&lt;li&gt;</span>Phasellus iaculis neque<span class="nt">&lt;/li&gt;</span>
253 
+      <span class="nt">&lt;li&gt;</span>Purus sodales ultricies<span class="nt">&lt;/li&gt;</span>
254 
+      <span class="nt">&lt;li&gt;</span>Vestibulum laoreet porttitor sem<span class="nt">&lt;/li&gt;</span>
255 
+      <span class="nt">&lt;li&gt;</span>Ac tristique libero volutpat at<span class="nt">&lt;/li&gt;</span>
256 
+    <span class="nt">&lt;/ul&gt;</span>
257 
+  <span class="nt">&lt;/li&gt;</span>
258 
+  <span class="nt">&lt;li&gt;</span>Faucibus porta lacus fringilla vel<span class="nt">&lt;/li&gt;</span>
259 
+  <span class="nt">&lt;li&gt;</span>Aenean sit amet erat nunc<span class="nt">&lt;/li&gt;</span>
260 
+  <span class="nt">&lt;li&gt;</span>Eget porttitor lorem<span class="nt">&lt;/li&gt;</span>
261 
+<span class="nt">&lt;/ul&gt;</span></code></pre></div>
262 
+
263 
+<h3 id="inline"><a class="anchorjs-link " href="#inline" aria-label="Anchor link for: inline" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Inline</h3>
264 
+
265 
+<p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
266 
+
267 
+<div class="bd-example" data-example-id="">
268 
+<ul class="list-inline">
269 
+  <li>Lorem ipsum</li>
270 
+  <li>Phasellus iaculis</li>
271 
+  <li>Nulla volutpat</li>
272 
+</ul>
273 
+</div>
274 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">&gt;</span>
275 
+  <span class="nt">&lt;li&gt;</span>Lorem ipsum<span class="nt">&lt;/li&gt;</span>
276 
+  <span class="nt">&lt;li&gt;</span>Phasellus iaculis<span class="nt">&lt;/li&gt;</span>
277 
+  <span class="nt">&lt;li&gt;</span>Nulla volutpat<span class="nt">&lt;/li&gt;</span>
278 
+<span class="nt">&lt;/ul&gt;</span></code></pre></div>
279 
+
280 
+<h3 id="horizontal-description"><a class="anchorjs-link " href="#horizontal-description" aria-label="Anchor link for: horizontal description" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>Horizontal description</h3>
281 
+
282 
+<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code>.text-truncate</code> class to truncate the text with an ellipsis.</p>
283 
+
284 
+<div class="bd-example" data-example-id="">
285 
+<dl class="dl-horizontal">
286 
+  <dt class="col-sm-3">Description lists</dt>
287 
+  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
288 
+
289 
+  <dt class="col-sm-3">Euismod</dt>
290 
+  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
291 
+  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
292 
+
293 
+  <dt class="col-sm-3">Malesuada porta</dt>
294 
+  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
295 
+
296 
+  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
297 
+  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
298 
+</dl>
299 
+</div>
300 
+<div class="zero-clipboard"></div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;dl</span> <span class="na">class=</span><span class="s">"dl-horizontal"</span><span class="nt">&gt;</span>
301 
+  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Description lists<span class="nt">&lt;/dt&gt;</span>
302 
+  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>A description list is perfect for defining terms.<span class="nt">&lt;/dd&gt;</span>
303 
+
304 
+  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Euismod<span class="nt">&lt;/dt&gt;</span>
305 
+  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<span class="nt">&lt;/dd&gt;</span>
306 
+  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9 col-sm-offset-3"</span><span class="nt">&gt;</span>Donec id elit non mi porta gravida at eget metus.<span class="nt">&lt;/dd&gt;</span>
307 
+
308 
+  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Malesuada porta<span class="nt">&lt;/dt&gt;</span>
309 
+  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Etiam porta sem malesuada magna mollis euismod.<span class="nt">&lt;/dd&gt;</span>
310 
+
311 
+  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3 text-truncate"</span><span class="nt">&gt;</span>Truncated term is truncated<span class="nt">&lt;/dt&gt;</span>
312 
+  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="nt">&lt;/dd&gt;</span>
313 
+<span class="nt">&lt;/dl&gt;</span></code></pre></div>

+ 1 - 1
app/index.html
Wyświetl plik 

@@ -77,7 +77,7 @@
77 77 
         <script src="scripts/controllers/rulebook-ctrl.js"></script>
78 78 
         <script src="scripts/controllers/rest-api-v1-ctrl.js"></script>
79 79 
         <script src="scripts/controllers/realtime-api-v1-ctrl.js"></script>
80 
-        <script src="scripts/controllers/about.js"></script>
80 
+        <script src="scripts/controllers/page-group-ctrl.js"></script>
81 81 
         <script src="scripts/services/oauth-service.js"></script>
82 82 
         <script src="scripts/services/data-service.js"></script>
83 83 
         <script src="scripts/services/realtime-service.js"></script>

+ 11 - 2
app/scripts/app.js
Wyświetl plik 

@@ -71,5 +71,14 @@ angular
71 71 
         },
72 72 
       }
73 73 
     })
74 
-
75 
-  }]);
74 
+    .state('theme', {
75 
+      url: "/theme/:id",
76 
+      templateUrl: "views/page.html",
77 
+      controller: 'PageGroupCtrl',
78 
+      resolve: {
79 
+        pageData: function($stateParams, PageService) {
80 
+          return PageService.find("theme", $stateParams.id);
81 
+        },
82 
+      }
83 
+    })
84 
+  }])

+ 35 - 0
app/scripts/controllers/page-group-ctrl.js
Wyświetl plik 

@@ -0,0 +1,35 @@
1 
+'use strict';
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name avalancheDocsApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the avalancheDocsApp
9 
+ */
10 
+angular.module('avalancheDocsApp')
11 
+  .controller('PageGroupCtrl', ['$scope', '$location', '$cookies', '$window', '$rootScope', 'DataService', 'usSpinnerService', 'OAuthService', 'PageService',  function ($scope, $location, $cookies, $window, $rootScope, DataService, usSpinnerService, OAuthService, PageService) {
12 
+
13 
+    $scope.pageData = PageService.get();
14 
+    $scope.pageList = PageService.all(PageService.getGroup());
15 
+    //console.log("Loading page " + $scope.pageData.title)
16 
+
17 
+    $rootScope.$on('get-pages:finished', function() {
18 
+      if(!$scope.$$phase) {
19 
+        $scope.$apply(function(){
20 
+          $scope.pageData = PageService.get();
21 
+        });
22 
+      } else {
23 
+          $scope.pageData = PageService.get();
24 
+      }
25 
+    });
26 
+
27 
+    $scope.navActivePage = function (viewLocation) {
28 
+        return viewLocation === PageService.getGroup();
29 
+    };
30 
+
31 
+    $scope.isActive = function (viewLocation) {
32 
+        return viewLocation === $location.path();
33 
+    };
34 
+
35 
+  }]);

+ 6 - 0
app/scripts/services/page-service.js
Wyświetl plik 

@@ -2,8 +2,10 @@ angular.module('avalancheDocsApp')
2 2 
 .service('PageService', [ '$rootScope', '$http',  function($rootScope, $http) {
3 3 
   var pages = [];
4 4 
   var current_page = {};
5 
+  var current_group = "";
5 6
6 7 
   this.find = function(group, page){
8 
+    current_group = group;
7 9 
     if( pages.length > 0) {
8 10 
       searchForPage(group, page);
9 11 
     } else {
 
@@ -22,6 +24,10 @@ angular.module('avalancheDocsApp')
22 24 
     return current_page;
23 25 
   }
24 26
27 
+  this.getGroup = function(){
28 
+    return current_group;
29 
+  }
30 
+
25 31 
   this.all = function(group){
26 32 
     return pages[group];
27 33 
   }

+ 26 - 0
app/styles/avalanche_theme/docs.scss
Wyświetl plik 

@@ -190,3 +190,29 @@
190 190 
 .bd-callout p:last-child {
191 191 
     margin-bottom: 0;
192 192 
 }
193 
+
194 
+/*!
195 
+ * Bootstrap Docs (http://getbootstrap.com)
196 
+ * Copyright 2011-2014 Twitter, Inc.
197 
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
198 
+ * details, see http://creativecommons.org/licenses/by/3.0/.
199 
+ */.bd-masthead,.bd-pageheader .container{position:relative}.ge,.sd{font-style:italic}.bd-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;line-height:9rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bd-booticon.inverse{color:#563d7c;background-color:#fff}.bd-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bd-navbar{font-size:87.5%}.bd-navbar .navbar-nav .nav-link{color:#8e869d}.bd-navbar .navbar-nav .nav-link.active,.bd-navbar .navbar-nav .nav-link:focus,.bd-navbar .navbar-nav .nav-link:hover{color:#373a3c;background-color:transparent}.bd-navbar .navbar-nav .nav-link.active{font-weight:500}.bd-navbar .dropdown-menu{font-size:inherit}@media (max-width:47.9em){.bd-navbar .nav-link{float:none}.bd-navbar .nav-link+.nav-link{margin-left:0}}.bd-masthead{padding:3rem .9375rem 2rem;color:#cdbfe3;text-align:center;background:-webkit-linear-gradient(315deg,#271b38,#563d7c,#7952b3);background:-o-linear-gradient(315deg,#271b38,#563d7c,#7952b3);background:linear-gradient(135deg,#271b38,#563d7c,#7952b3)}.bd-masthead .bd-booticon{margin:0 auto 2rem;color:#cdbfe3;border-color:#cdbfe3}.bd-masthead h1{font-weight:300;line-height:1}.bd-masthead .lead{margin-left:auto;margin-right:auto;margin-bottom:2rem;font-size:1.25rem;color:#fff}.bd-masthead .version{margin-top:-1rem;margin-bottom:2rem}.bd-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem;font-weight:500;color:#ffe484;border-color:#ffe484}.bd-masthead .btn:hover{color:#2a2730;background-color:#ffe484;border-color:#ffe484}.bd-masthead .carbonad{margin-bottom:-2rem!important}@media (min-width:34em){.bd-masthead{padding-top:8rem;padding-bottom:2rem}.bd-masthead .btn{width:auto}.bd-masthead .carbonad{margin-bottom:0!important}}@media (min-width:48em){.bd-masthead{padding-bottom:4rem}.bd-masthead .bd-header{margin-bottom:4rem}.bd-masthead h1{font-size:4rem}.bd-masthead .lead{font-size:1.5rem}.bd-masthead .carbonad{margin-top:3rem!important}}@media (min-width:62em){.bd-masthead .lead{width:85%;font-size:2rem}}.bd-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-top:1px solid #eee}.bd-featurette .highlight,.carbonad{text-align:left}@media (min-width:48em){.bd-featurette .col-sm-6:first-child{padding-right:2.8125rem}.bd-featurette .col-sm-6:last-child{padding-left:2.8125rem}}.bd-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.bd-featurette-title+.lead{font-size:1rem;margin-bottom:2rem}.half-rule{width:6rem;margin:2.5rem auto}.carbonad,.carbonad-tag,.carbonad-text{width:auto!important;height:auto!important;font-family:inherit!important}@media (min-width:34em){.bd-featurette{text-align:left}.half-rule{margin-right:0;margin-left:0}}.bd-featurette h4{margin-top:1rem;margin-bottom:.5rem;font-weight:400;color:#333}.bd-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bd-featurette-img:hover{color:#0275d8;text-decoration:none}.bd-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bd-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bd-featurette{padding-top:6rem;padding-bottom:6rem}.bd-featurette-title{font-size:2.5rem}.bd-featurette-title+.lead{font-size:1.5rem}.bd-featurette .lead{max-width:80%}.bd-featurette .img-responsive{margin-top:0}}.bd-featured-sites{margin-right:-1px;margin-left:-1px}.bd-featured-sites .col-xs-6{padding:1px}.bd-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bd-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bd-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.carbonad{padding:1.25rem!important;margin:2rem -1.875rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;background:#3e2c5a!important;border:0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;margin-left:145px!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#cdbfe3!important}.carbonad-tag a:hover,.carbonad-text a:hover{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:34em){.carbonad{width:330px!important;padding:1rem!important;margin-right:auto!important;margin-left:auto!important;border-radius:.25rem}}.bd-content>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bd-content>table>tbody>tr>td,.bd-content>table>tbody>tr>th,.bd-content>table>tfoot>tr>td,.bd-content>table>tfoot>tr>th,.bd-content>table>thead>tr>td,.bd-content>table>thead>tr>th{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bd-content>table>tbody>tr>td>p:last-child,.bd-content>table>tbody>tr>th>p:last-child,.bd-content>table>tfoot>tr>td>p:last-child,.bd-content>table>tfoot>tr>th>p:last-child,.bd-content>table>thead>tr>td>p:last-child,.bd-content>table>thead>tr>th>p:last-child{margin-bottom:0}#markdown-toc ul,.bd-content>ol li,.bd-content>ul li{margin-bottom:.25rem}.bd-content>table td:first-child>code{white-space:nowrap}.bd-content>h2:not(:first-child){margin-top:3rem}.bd-content>h3{margin-top:1.5rem}@media (min-width:34em){.bd-title{font-size:3rem}.bd-title+p{font-size:1.25rem;font-weight:300}}#markdown-toc>li:first-child{display:none}#markdown-toc ul{padding-left:2rem;margin-top:.25rem}.bd-pageheader{padding:2rem .9375rem;margin-bottom:1.5rem;color:#cdbfe3;text-align:center;background-color:#563d7c}.bd-pageheader h1{font-size:3rem;font-weight:400;color:#fff}.bd-pageheader p{margin-bottom:0;font-size:1.25rem;font-weight:300}@media (min-width:34em){.bd-pageheader{padding-top:4rem;padding-bottom:4rem;margin-bottom:3rem;text-align:left}.bd-pageheader .carbonad{margin:2rem 0 0!important}}@media (min-width:62em){.bd-pageheader h1,.bd-pageheader p{margin-right:380px}.bd-pageheader .carbonad{position:absolute;top:0;right:.75rem;margin:0!important}}@media (min-width:48em){.bd-pageheader h1{font-size:4rem}.bd-pageheader p{font-size:1.5rem}.bd-sidebar{padding-left:1rem}}.bd-search{position:relative;margin-bottom:1.5rem}.bd-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem;background-color:#fafafa}.bd-search .form-control:focus{background-color:#fff}.bd-search-results{right:0;display:block;padding:0;overflow:hidden;font-size:.9rem}.bd-search-results:empty{display:none}.bd-search-results .dropdown-item{padding-left:.75rem;padding-right:.75rem}.bd-search-results .dropdown-item:first-child{margin-top:.25rem}.bd-search-results .dropdown-item:last-child{margin-bottom:.25rem}.bd-search-results .no-results{padding:.75rem 1rem;color:#7a7a7a;text-align:center}.bd-sidenav{display:none}.active>.bd-sidenav,.bd-toc-link{display:block}.bd-toc-link{padding:.25rem .75rem;color:#55595c}.bd-toc-link:focus,.bd-toc-link:hover{color:#0275d8;text-decoration:none}.active>.bd-toc-link{font-weight:500;color:#373a3c}.bd-toc-item.active{margin-top:1rem;margin-bottom:1rem}.bd-toc-item:first-child{margin-top:0}.bd-toc-item:last-child{margin-bottom:2rem}.bd-sidebar .nav>li>a{display:block;padding:.25rem .75rem;font-size:90%;color:#99979c}.bd-sidebar .nav>li>a:focus,.bd-sidebar .nav>li>a:hover{color:#0275d8;text-decoration:none;background-color:transparent}.bd-sidebar .nav>.active:focus>a,.bd-sidebar .nav>.active:hover>a,.bd-sidebar .nav>.active>a{font-weight:500;color:#373a3c;background-color:transparent}.bd-footer{padding:4rem 0;margin-top:4rem;font-size:85%;background-color:#f7f7f7;text-align:center}.bd-footer a{font-weight:500;color:#55595c}.bd-footer a:hover{color:#0275d8}.bd-footer p{margin-bottom:0}.bd-example-row .row,.bd-footer-links{margin-bottom:1rem}@media (min-width:34em){.bd-footer{text-align:left}}.bd-brand-item,.bd-example-tooltips,.responsive-utilities td{text-align:center}.bd-footer-links{padding-left:0}.bd-footer-links li{display:inline-block}.bd-footer-links li+li{margin-left:1rem}.bd-example-row .row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bd-example-container{min-width:16rem;max-width:25rem;margin-left:auto;margin-right:auto}.bd-example-container-header{height:3rem;margin-bottom:.5rem;background-color:#daeeff;border-radius:.25rem}.bd-example-container-sidebar{float:right;width:4rem;height:8rem;background-color:#fae3c4;border-radius:.25rem}.bd-example-container-body{height:8rem;margin-right:4.5rem;background-color:#957bbe;border-radius:.25rem}.bd-example-container-fluid{max-width:none}.bd-example{position:relative;padding:1rem;margin:1rem -1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bd-example:after,.bd-example:before{content:" ";display:table}.bd-example:after{clear:both}@media (min-width:34em){.bd-example{margin-left:0;margin-right:0;margin-bottom:0;padding:1.5rem;border-width:.2rem}}.bd-example+.highlight,.bd-example+.zero-clipboard+.highlight{margin-top:0}.bd-example+p{margin-top:2rem}.bd-example .container{width:auto}.bd-example>.form-control+.form-control{margin-top:.5rem}.bd-example>.card{max-width:20rem}.bd-example>.alert+.alert,.bd-example>.nav+.nav,.bd-example>.navbar+.navbar,.bd-example>.progress+.btn,.bd-example>.progress+.progress{margin-top:1rem}.bd-example>.dropdown-menu:first-child{position:static;display:block}.bd-example>.close{float:none}.bd-example-type .table .type-info{color:#999;vertical-align:middle}.bd-example-type .table td{padding:1rem 0;border-color:#eee}.bd-example-type .table tr:first-child td{border-top:0}.bd-example-type h1,.bd-example-type h2,.bd-example-type h3,.bd-example-type h4,.bd-example-type h5,.bd-example-type h6{margin:0}.bd-example-bg-classes p{padding:1rem}.bd-example>img+img{margin-left:.5rem}.bd-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bd-example-control-sizing input[type=text]+input[type=text],.bd-example-control-sizing select,.bd-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bd-example-form .input-group{margin-bottom:.5rem}.bd-example>textarea.form-control{resize:vertical}.bd-example>.list-group{max-width:400px}.bd-example .navbar-fixed-top{position:static;margin:-1rem -1rem 1rem}.bd-example .navbar-fixed-bottom{position:static;margin:1rem -1rem -1rem}@media (min-width:34em){.bd-example .navbar-fixed-top{margin:-1.5rem -1.5rem 1rem}.bd-example .navbar-fixed-bottom{margin:1rem -1.5rem -1.5rem}}.bd-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bd-example>.pager{margin-top:0}.bd-example-modal{background-color:#f5f5f5}.bd-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bd-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bd-example>.dropdown>.dropdown-toggle{float:left}.bd-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bd-example-tabs .nav-tabs{margin-bottom:1rem}.bd-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bd-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bd-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bd-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.bd-example>.center-block:not(img){max-width:200px;padding:.5rem;background-color:#eee}.bd-example>.bg-danger:not(.navbar),.bd-example>.bg-info:not(.navbar),.bd-example>.bg-primary:not(.navbar),.bd-example>.bg-success:not(.navbar),.bd-example>.bg-warning:not(.navbar){padding:.5rem;margin-top:.5rem;margin-bottom:.5rem}.highlight{padding:1rem;margin:1rem -1rem;background-color:#f7f7f9}@media (min-width:34em){.highlight{padding:1.5rem;margin-right:0;margin-left:0}}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}#focusedInput{border-color:#66afe9;outline:0;outline:dotted thin\9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)}.table-responsive .highlight pre{white-space:normal}.bd-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.hidden-on .col-xs-6>.not-visible,.visible-on .col-xs-6>.not-visible{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible,.visible-on .col-xs-6 .visible{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}@media (max-width:33.9em){.hidden-xs-only{display:none!important}}@media (min-width:34em) and (max-width:47.9em){.hidden-sm-only{display:none!important}}@media (min-width:48em) and (max-width:61.9em){.hidden-md-only{display:none!important}}@media (min-width:62em) and (max-width:74.9em){.hidden-lg-only{display:none!important}}@media (min-width:75em){.hidden-xl-only{display:none!important}}.btn-bs{font-weight:500;color:#7952b3;border-color:#7952b3}.btn-bs:active,.btn-bs:focus,.btn-bs:hover{color:#fff;background-color:#7952b3;border-color:#7952b3}.bd-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bd-brand-logos,.bd-callout code,.btn-clipboard{border-radius:.25rem}.bd-callout h4{margin-top:0;margin-bottom:.25rem}.bd-callout p:last-child{margin-bottom:0}.bd-callout+.bd-callout{margin-top:-.25rem}.bd-callout-info{border-left-color:#5bc0de}.bd-callout-info h4{color:#5bc0de}.bd-callout-warning{border-left-color:#f0ad4e}.bd-callout-warning h4{color:#f0ad4e}.bd-callout-danger{border-left-color:#d9534f}.bd-callout-danger h4{color:#d9534f}.bd-examples .img-thumbnail{margin-bottom:.75rem}.bd-examples h4{margin-bottom:.25rem}.bd-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bd-examples{margin-right:-.75rem;margin-left:-.75rem}.bd-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bd-team{margin-bottom:1.5rem}.bd-team .team-member{line-height:2rem;color:#555}.bd-team .team-member:hover{color:#333;text-decoration:none}.bd-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bd-team img,.color-swatch{float:left;border-radius:.25rem}.bd-team img{width:2rem;margin-right:.5rem}.bd-browser-bugs td p{margin-bottom:0}.bd-browser-bugs th:first-child{width:18%}.bd-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9}.bd-brand-logos .inverse,.color-swatches .bd-purple{background-color:#563d7c}.bd-brand-item{padding:4rem 0}.bd-brand-item+.bd-brand-item{border-top:1px solid #fff}.bd-brand-logos .inverse{color:#fff}.bd-brand-item h1,.bd-brand-item h3{margin-top:0;margin-bottom:0}.bd-brand-item .bd-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bd-brand-item{display:table-cell;width:1%}.bd-brand-item+.bd-brand-item{border-top:0;border-left:1px solid #fff}.bd-brand-item h1{font-size:4rem}}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem}.color-swatches .bd-purple-light{background-color:#cdbfe3}.color-swatches .bd-purple-lighter{background-color:#e5e1ea}.color-swatches .bd-gray{background-color:#f9f9f9}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:.5rem;right:.5rem;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:transparent}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}.zero-clipboard{display:block}}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1,.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc,.kd,.kn,.kp,.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf,.mh,.mi,.mo{color:#F60}.s2,.sb,.sc,.sd,.se,.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc,.vg,.vi{color:#033}.il{color:#F60}.css .nt+.nt,.css .o,.css .o+.nt{color:#999}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}
200 
+/*# sourceMappingURL=docs.min.css.map */
201 
+
202 
+.highlight {
203 
+    padding: 2px;
204 
+}
205 
+.highlight pre code {
206 
+    font-size: inherit;
207 
+    color: #bbb;
208 
+}
209 
+code {
210 
+  overflow-wrap: break-word;
211 
+}
212 
+
213 
+.docs h2 {
214 
+  margin-top: 20px;
215 
+}
216 
+.docs h3 {
217 
+  margin-top: 10px;
218 
+}

+ 2 - 1
app/views/helpers/sidebar.html
Wyświetl plik 

@@ -7,8 +7,9 @@
7 7 
     <li ng-class="{ active: navActivePage('rulebook')}"><a ui-sref="rulebook({ id: 'intro'})">Rulebook</a></li>
8 8 
     <li ng-hide="'false'"><a ui-sref="faq">FAQ</a></li>
9 9 
     <li ng-hide="'false'"><a ui-sref="styleguide">Styleguide</a></li>
10 
-    <li ng-hide="'true'"><a ui-sref="theme">Theme</a></li>
10 
+    <li ng-class="{ active: navActivePage('theme')}"><a ui-sref="theme({ id: 'typography' })">Theme</a></li>
11 11 
     <li ng-class="{ active: navActivePage('rest-api-v1')}"><a ui-sref="rest-api-v1({ id: 'get-missions' })">Restfull API v1 <span class="sr-only">(current)</span></a></li>
12 12 
     <li ng-class="{ active: navActivePage('realtime-api-v1')}"><a ui-sref="realtime-api-v1({ id: 'realtime-mission-activity' })">Realtime API v1</a></li>
13 
+    <li ng-hide="'false'"><a ui-sref="roadmap">Roadmap</a></li>
13 14 
   </ul>
14 15 
 </div>

+ 23 - 0
app/views/page.html
Wyświetl plik 

@@ -0,0 +1,23 @@
1 
+<div class="container-fluid" >
2 
+  <div class="row">
3 
+    <ng-include src="'views/helpers/sidebar.html'"></ng-include>
4 
+    <div class="col-sm-4 col-md-3 col-md-offset-2 col-sm-offset-3 sidebar sidebar-secondary">
5 
+      <ul class="nav nav-sidebar">
6 
+        <li ng-repeat="page in pageList" ng-class="{ active: isActive(page.pageUrl)}">
7 
+          <a ui-sref="rest-api-v1({ id: page.slug })">
8 
+            <h5>{{page.title}}</h5>
9 
+            <p style="margin-bottom: 10px;"><i>{{page.tagline}}</i></p>
10 
+          </a>
11 
+        </li>
12 
+
13 
+      </ul>
14 
+    </div>
15 
+    <div class="col-sm-5 col-sm-offset-7 col-md-7 col-md-offset-5 main">
16 
+    <div class="api-endpoint">
17 
+      <h2 style="margin-bottom: 0px;">{{pageData.title}}</h2>
18 
+      <hr>
19 
+      <div ng-include="pageData.content_html" class="docs" ng-show="pageData.content_html != undefined"></div>
20 
+      <div btf-markdown ng-include="pageData.content_markdown" class="docs" ng-show="pageData.content_markdown != undefined"></div>
21 
+    </div>
22 
+  </div>
23 
+</div>